<script setup lang="ts">
import { MemberApi } from '@/api/wo/member'

const dialogVisible = ref(false)

import { useMessage } from '@/hooks/web/useMessage'
import { ElTree } from 'element-plus'

const message = useMessage()

let topCaches = []

let childCaches = []

let count = 0
const open = (data) => {
  dialogVisible.value = true
  member.value = data
  member.value.name = data.phone + ' ' + data.level
  topExp.value = false
  childExp.value = false
  //重制
  topCaches = []
  childCaches = []
  count = 0
}

const member = ref({})

defineExpose({ open })

const props = {
  nodeKey: 'id',
  label: 'name',
  children: 'children',
  isLeaf: 'leaf'
}

//这里每次都是只搞一层
const loadNode = async (
  node: Node,
  resolve: (data: Tree[]) => void,
  reject: () => void,
  type: number
) => {
  count++
  if (type == 0) {
    //往上最多20次
    if (count > 20) {
      //最多加载20次
      return reject()
    }
  }
  if (type == 1) {
    //往下最多50次
    if (count > 50) {
      //最多加载20次
      return reject()
    }
  }

  if (node.level == 0) {
    resolve([member.value])
    return
  }
  let vos = await MemberApi.getTeam(node.data.id, type, 1)
  let flag = false
  if (type == 0) {
    if (vos.length > 0 && topCaches.includes(vos[0]?.wid)) {
      flag = true
    }
  } else {
    if (vos.length > 0 && childCaches.includes(vos[0]?.wid)) {
      flag = true
    }
  }
  if (flag) {
    message.success('循环了' + vos[0].wid)
    resolve([])
  } else {
    resolve(vos)
    if (type == 0) {
      if (vos.length > 0) {
        //添加第一项
        topCaches.push(vos[0].wid)
      }
    } else {
      //添加每一项的Wid
      childCaches.push(...vos.map((vo) => vo.wid))
    }
  }
}

const loading = ref(false)

const topTree = ref()

const childTree = ref()

const topTreeKey = ref(new Date())

const childTreeKey = ref(new Date())

const topExp = ref(false)

const childExp = ref(false)

const check = async (data, type) => {
  if (!data) {
    return
  }
  if (type == 0) {
    topTreeKey.value = new Date()
  } else {
    childTreeKey.value = new Date()
  }

  // if (type == 0) {
  //   topExp.value = !topExp.value
  // } else {
  //   childExp.value = !childExp.value
  // }
  // if (!data) {
  //   return
  // }
  //最多只查20层
  // let vos = await MemberApi.getTeam(member.value.id, type, 20)
  // if (type == 0) {
  //   topTreeData.value = { ...member.value, children: vos }
  // } else {
  //   childTreeData.value = { ...member.value, children: vos }
  // }
}
</script>

<template>
  <Dialog style="min-height: 400px" title="会员关系" v-model="dialogVisible">
    <el-row v-loading="loading">
      <el-col :span="12">
        <el-checkbox
          v-model="topExp"
          @change="(data) => check(data, 0)"
          style="margin-left: 24px"
          label="上层全部展开" />
        <el-tree
          :key="topTreeKey"
          ref="topTree"
          :default-expand-all="topExp"
          lazy
          style="max-width: 600px"
          :props="props"
          :load="(node, resolve, reject) => loadNode(node, resolve, reject, 0)"
          show-checkbox
      /></el-col>
      <el-col :span="12">
        <el-checkbox
          v-model="childExp"
          @change="(data) => check(data, 1)"
          style="margin-left: 24px"
          label="下层全部展开" />
        <el-tree
          :key="childTreeKey"
          ref="childTree"
          :default-expand-all="childExp"
          lazy
          style="max-width: 600px"
          :props="props"
          :load="(node, resolve, reject) => loadNode(node, resolve, reject, 1)"
          show-checkbox
      /></el-col>
    </el-row>
  </Dialog>
</template>

<style scoped lang="scss"></style>
